<template>
	<div>provide</div>
	<b>父传给子的值：{{str}}</b>
	<div>
	<b>父组件传过来的v-model {{modelValue}}</b>	
	</div>
	<button @click="change">子想父传值</button>
	<!-- teleport 应用场景 比如 弹出层  
	注意 传送  组件需要是父子关系    子组件的传送   
	要传送的节点必须要在父组件引入的子组件之前
    class为 .clas名   ID 为 #id  只要是在一个页面的节点都可以传送 -->
	<!-- ****  uniapp的传送门好像有BUG 如果你刷新页面或者切换页面传送门就找不到他上级的节点  调试的话必须先在父组件中把子组件删除保存下 然后再重新加上子组件就又不警告了  这里只是一个展示 -->
	<!-- #tlt -->
	<teleport  to='#app'>   
		<div v-if="show" class='div'></div>
		<slot name="top" />
	</teleport>
	<div v-for="item in list">
		<slot :res='item'></slot>
	</div>
	

</template>


<script setup>
	name:'children2'
	import {
		reactive,
		toRefs,
		computed,
		watch,
		defineProps, //接受父组件的传参
		defineEmits //子向父传值
	} from 'vue'
	const emits=defineEmits(['fn','update:modelValue'])  //子向父 需注册
   defineProps({
		str:{
			type:String,
			default:'这个是子组件默认值'
		},
		show:{
			tyep:Boolean,
			default:false
		},
		modelValue:{
			type:Number
		}
	})
	let list=reactive([{
		title:'作用域插槽'
	},{
		title:'可以用来'
	},{
		title:'给父组件来传递值或数组都可以'
	}])
	// defineProps(['str','show'])
	// let {str}=toRefs(props)
	function change(){
		emits('fn','子传给父的值')
		emits('update:modelValue',222222)
	}
</script>

<style scoped>
	.div{
		height: 100px;
		width: 100px;
		background: #ff0000;
	}
</style>